<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<div id="appCmsCate">
<el-row>
<el-breadcrumb separator-class="el-icon-arrow-right">
	<el-breadcrumb-item>首页</el-breadcrumb-item>
	<el-breadcrumb-item>内容管理</el-breadcrumb-item>
	<el-breadcrumb-item>栏目管理</el-breadcrumb-item>
</el-breadcrumb>
</el-row>
<el-row>
<el-col :span="24" align="right">
	<el-select v-model="selectedSite" placeholder="请选择站点" @change="onCmsSiteChange" size="small">
		<el-option v-for="item in optionsCmsSite" :key="item.id" :label="item.domain" :value="item.id">
		</el-option>
	</el-select>
	<el-button @click="handleAddCmsSite" size="small" type="success" icon="el-icon-circle-plus-outline"
		:disabled="AddCmsCateButtonDisabled">添加栏目</el-button>
</el-col>
</el-row>
<br>
<el-row>
<el-col :span="24">
	<el-table ref="tableCmsCate" :data="tableCmsCateData" border stripe fit highlight-current-row
		v-loading="tableCmsCateLoading" max-height="1200">
		<el-table-column prop="name" label="栏目名称" width="320">
	      <template slot-scope="scope">
	      	<span v-for="item in new Array(scope.row.level - 1)" style="padding-left: 18px;"></span>
	      	<i v-if="scope.row.isParent == true" class="el-icon-caret-bottom"></i>
	        {{ scope.row.name }}
	      </template>	
		</el-table-column>
		<el-table-column prop="cateKind" label="类型" width="180">
	      <template slot-scope="scope">
	        {{ getCateKindLabel(scope.row.cateKind) }}
	      </template>		
		</el-table-column>
		<el-table-column prop="display" label="显示" width="180">
	      <template slot-scope="scope">
	        {{ getDisplayLabel(scope.row.display) }}
	      </template>		
		</el-table-column>
		<el-table-column prop="status" label="状态" width="80">
	      <template slot-scope="scope">
			<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" size="small"
          		disable-transitions>{{ scope.row.status === 1 ? '正常' : '禁用' }}</el-tag>
	      </template>		
		</el-table-column>
		<el-table-column prop="sort" label="排序" width="80">
		</el-table-column>
		<el-table-column prop="created" label="创建日期" :formatter="dateFormat" width="180" sortable>
		</el-table-column>
		<el-table-column prop="updated" label="修改日期" :formatter="dateFormat" width="180" sortable>
		</el-table-column>
	    <el-table-column label="操作" width="180">
			<template slot-scope="scope">
				<el-button @click="handleEditCmsSite(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
	        	<el-button @click="handleAddChildCmsSite(scope.$index, scope.row)" type="text" size="small">添加子栏目</el-button>
			</template>
	    </el-table-column>
	</el-table>
</el-col>
</el-row>

<el-dialog :title="dialogCmsCateTitle" :visible.sync="dialogCmsCateVisible" width="600px" @closed="dialogCmsCateClosed">
	<el-form ref="formCmsCate" :model="modelCmsCate" status-icon :rules="rulesCmsCate">
		<el-form-item label="栏目名称" :label-width="formCmsCateLabelWidth" prop="name">
			<el-input v-model="modelCmsCate.name" autocomplete="off" maxlength="50"></el-input>
		</el-form-item>
		<el-form-item label="栏目种类" :label-width="formCmsCateLabelWidth">
			<el-select v-model="modelCmsCate.cateKind" placeholder="请选择栏目种类">
				<el-option v-for="option in cateKindOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="栏目显示" :label-width="formCmsCateLabelWidth">
			<el-select v-model="modelCmsCate.display" placeholder="请选择栏目显示">
				<el-option v-for="option in displayOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="状态" :label-width="formCmsCateLabelWidth">
			<el-select v-model="modelCmsCate.status" placeholder="请选择状态">
				<el-option v-for="option in statusOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="排序" :label-width="formCmsCateLabelWidth" prop="sort" placeholder="排序编号越小越靠前">
			<el-input v-model="modelCmsCate.sort" autocomplete="off" maxlength="11"></el-input>
		</el-form-item>
	</el-form>
	<div slot="footer" class="dialog-footer">
		<el-button @click="dialogCmsCateVisible = false">取 消</el-button>
		<el-button type="primary" :loading="isButtonLoadingCmsCate" @click="onSubmitCmsCate">确 定</el-button>
	</div>
</el-dialog>
</div>

<script>
	var appCmsCate = new Vue({
		el: '#appCmsCate',
		data() {
			var checkName = (rule, value, callback) => {
		        if (!value) {
		          return callback(new Error('栏目名称不能为空'));
		        } else {
		        	callback();
		        }
			};
			var checkSort = (rule, value, callback) => {
		        if (!value) {
		          return callback(new Error('排序不能为空'));
		        } else {
					callback();
		        }				
			};
			return {
				urlPostCmsSiteList: '/api/cms/site/list',
				urlPostCmsCateList: '/api/cms/cate/list',
				urlPostCmsCateSave: '/api/cms/cate/save',
				optionsCmsSite: [],
				selectedSite: null,
				siteId: null,
				tableCmsCateData: [],
				tableCmsCateLoading: false,
				AddCmsCateButtonDisabled: true,
				dialogCmsCateVisible: false,
				dialogCmsCateTitle: '添加栏目',
				cateKindOptions: [{
					label: '简介模块', value: 1
				},{
					label: '文章模块', value: 2
				},{
					label: '图片模块', value: 3
				},{
					label: '下载模块', value: 4
				},{
					label: '招聘模块', value: 5
				},{
					label: '友链模块', value: 6
				}],
				displayOptions: [{
					label: '不显示', value: 1
				},{
					label: '都显示', value: 2
				},{
					label: '头部导航显示', value: 3
				},{
					label: '底部导航显示', value: 4
				}],
				statusOptions: [{
					label: '正常', value: 1
				},{
					label: '禁用', value: 2
				}],
				modelCmsCate: {
					id: null,
					parentId: 0,
		            name: '',
		            sort: 666,
		            isParent: false,
		            level: 1,
		            cateKind: 1,
		            display: 1,
		            status: 1,
		            siteId: null
		          },
				rulesCmsCate: {
					name: [{validator: checkName, trigger: 'blur'}],
					sort: [{validator: checkSort, trigger: 'blur'}]
				},
				formCmsCateLabelWidth: '80px',
				isButtonLoadingCmsCate: false,
			}
		},
		methods: {
			/* Table */
			loadCmsSite() {
				this.$http.post(this.urlPostCmsSiteList, null, {emulateJSON: true}).
				then(function(response) {
					if (response.body.status == 200) {
						this.optionsCmsSite = response.body.data.list;
						if (this.optionsCmsSite && this.optionsCmsSite.length > 0) {
							this.selectedSite = this.optionsCmsSite[0];
							this.siteId = this.optionsCmsSite[0].id;
							this.onCmsSiteChange();
						}
					}
				}).catch(function (error) {
					console.log(error);
				});
			},
			onCmsSiteChange() {
				if (this.selectedSite) {
					this.loadtableCmsCateData();
					this.modelCmsCate.siteId = this.siteId;
					this.AddCmsCateButtonDisabled = false;
				}
			},
			loadtableCmsCateData() {
				this.tableCmsSiteLoading = true;
				this.$http.post(this.urlPostCmsCateList, {siteId: this.siteId}, {emulateJSON: true}).
				then(function(response) {
					if (response.body.status == 200) {
						this.tableCmsCateData = response.body.data;
						this.tableCmsSiteLoading = false;
					}
				}).catch(function (error) {
					console.log(error);
				});	
			},
			handleAddCmsSite() {
				this.dialogCmsCateTitle = '添加栏目';
				this.dialogCmsCateVisible = true;
			},
			handleAddChildCmsSite(index, row) {
				this.dialogCmsCateTitle = '添加栏目';
				this.dialogCmsCateVisible = true;
				this.modelCmsCate.parentId = row.id;
			},
			handleEditCmsSite(index, row) {
				//console.log(index, row);
				this.dialogCmsCateTitle = '修改栏目';
				this.dialogCmsCateVisible = true;
				this.modelCmsCate.id = row.id;
				this.modelCmsCate.parentId = row.parentId;
				this.modelCmsCate.name = row.name;
				this.modelCmsCate.sort = row.sort;
				this.modelCmsCate.isParent = row.isParent;
				this.modelCmsCate.cateKind = row.cateKind;
				this.modelCmsCate.display = row.display;
				this.modelCmsCate.status = row.status;
				this.modelCmsCate.siteId = row.siteId;
			},
			indexMethod(index) {
				return index + 1;
			},
			dateFormat(row, column, cellValue, index) {
				var date = new Date(cellValue);
				return formatDate(date, "yyyy-MM-dd hh:mm:ss");
			},
			getCateKindLabel(cateKind) {
				var label;
				this.cateKindOptions.forEach(function(item, index) {
					if (item.value == cateKind) {
						label = item.label;
					}
				});
				return label;
			},
			getDisplayLabel(display) {
				var label;
				this.displayOptions.forEach(function(item, index) {
					if (item.value == display) {
						label = item.label;
					}
				});
				return label;
			},
			/* Edit */
			onSubmitCmsCate() {
				this.isButtonLoadingCmsCate = true;
				this.$refs.formCmsCate.validate((valid) => {
					if (valid) {
						this.$refs.formCmsCate.$http.post(this.urlPostCmsCateSave, this.modelCmsCate, {emulateJSON: true})
						.then(function (response) {
							if (response.body.status == 200) {
								this.$message({
									message: "保存成功",
									type: "success"
								});
								appCmsCate.isButtonLoadingCmsCate = false;
								appCmsCate.dialogCmsCateVisible = false;								
								appCmsCate.loadtableCmsCateData();
							} else {
								this.$message.error(response.body.msg);
								appCmsCate.isButtonLoadingCmsCate = false;
							}
						}).catch(function (error) {
							console.log(error);
						});							
					}
				});
			},
			resetForm() {
				this.modelCmsCate = {
					id: null,
					parentId: 0,
		            name: '',
		            sort: 666,
		            isParent: false,
		            level: 1,
		            cateKind: 1,
		            display: 1,
		            status: 1,
		            siteId: null
				};
				this.$refs.formCmsCate.resetFields();
			},
			dialogCmsCateClosed() {
				this.resetForm();
			},
		},
		created() {
			this.loadCmsSite();
		}
	})
</script>